import { Graph } from "pack-antv-x6"
import { set} from "lodash-es"

export const LINE_HEIGHT = 16
export const NODE_WIDTH = 150
export const NODE_HEIGHT = 44

// const PORT_ATTRS: any = {
//   circle: {
//       magnet: false,
//       stroke: '#8f8f8f',
//       r: 5,
//   },
// }

Graph.registerPortLayout(
    'erPortPosition',
    (portsPositionArgs) => {
      
      return portsPositionArgs.map((_, index) => {
        return {
          position: {
            x: 0,
            y: (index) * LINE_HEIGHT + NODE_HEIGHT,
          },
          angle: 0,
        }
      })
    },
    true,
  )

const ER_MARK = {
    inherit: 'rect',
    width:150,
    zIndex:10,
    height:NODE_HEIGHT,
    attrs:{
      body: {
        strokeWidth: 1,
        stroke: '#7FA6C5',
        fill: '#fff',
        rx:2,
        ry:2,
      },
      iconbox:{
        ref:"body",
        refX:4,
        yAlign:"middle",
        refY:20,
        width:"16",
        height:"16",
      },
      icon:{
        class:"i-material-symbols-light:table-outline",
        width:"16",
        height:"16",
      },
      label: {
        fontWeight: 'bold',
        fill: '#163D5CFF',
        fontSize: 12,
        textAnchor:"start",
        refX:24,
        refY:20,
        textWrap: {
          width: 110,
          height: "20",
          ellipsis: true,
        }
      },
      
      topLabelBg:{
        xAlign:"right",
        yAlign:"top",
        refX:"100%",
        refY:0,
        fill:"#165DFF1A",
        stroke:"#165DFF1A",
        width:"40",
        height:"13",
        strokeWidth: 0,
        rx:2,
        ry:2,
      },
      topLabel:{
        ref:"topLabelBg",
        textAnchor:"middle",
        textVerticalAnchor:"middle",
        refY:'50%',
        refX:"50%",
        fontSize:8,
        fill:"#5C89ACFF",
        textWrap: {
          width: 110,
          height: "20",
          ellipsis: true,
        }
      },
      collapsebox:{
        ref:"searchbox",
        xAlign:"right",
        refX:"100%",
        refY:"50%",
        yAlign:"middle",
        fontSize:12,
        event:'node:collapse',
        cursor:'pointer',
        width:12,
        height:12
      },
      collapse:{
        class:"i-stash:angle-right rotate-90"
      },
      searchbox:{
        yAlign:"top",
        refY:"32",
        refY2:-2,
        refX:4,
        width:142,
        height:12,
        style:"display:flex;"
      },
      serch:{
        spellcheck:false,
        style:"flex:1;font-size:8px;line-height:10px;",
        placeholder:"请输入名称搜索列",
        event:'node:search'
      },
      edgePort:{
        refX:0,
        refY:20,
        width:150,
        height:0,
        stroke: 'red',
      },
    },
    markup:[
      {tagName:"rect",selector:"edgePort"},
      {
        tagName: 'rect',
        selector: 'body',
      },
      {
        tagName:"foreignObject",
        selector:"iconbox",
        children:[
          {
            ns:"http://www.w3.org/1999/xhtml",
            tagName:"div",
            selector:"icon",
          }
        ]
      },
      {
        tagName: 'text',
        selector: 'label',
      },
      {
        tagName:"rect",
        selector:"topLabelBg"
      },
      {
        tagName: 'text',
        selector: 'topLabel',
      },
      
      
      {
        tagName:"foreignObject",
        selector:"searchbox",
        children:[
          {
            ns:"http://www.w3.org/1999/xhtml",
            tagName:"div",
            attrs:{
              style:"padding:1px 2px;border-radius:2px;display:flex;flex-wrap:nowrap;width:100%;height:100%;align-items:center;gap:4px;border:1px solid #D9E3F0FF;background:#F9FDFF;"
            },
            children:[
              {
                ns:"http://www.w3.org/1999/xhtml",
                tagName:"div",
                selector:"searchicon",
                attrs:{
                  class:"i-mingcute:search-3-line",
                  style:"font-size:8px;min-width:1em;min-height:1em;color:#D9E3F0;"
                }
              },
              {
                ns:"http://www.w3.org/1999/xhtml",
                tagName:"input",
                selector:"serch",
              }
            ]
            // attrs:{
            //   class:"i-mingcute:search-3-line"
            // }
          },
          
        ]
      },
      {
        tagName:"foreignObject",
        selector:"collapsebox",
        children:[
          {
            ns:"http://www.w3.org/1999/xhtml",
            tagName:"div",
            selector:"collapse"
          }
        ]
      },
      
    ],
    ports:{
        groups:{
            list:{
                markup:[
                  {
                    tagName: 'rect',
                    selector: 'portBody',
                  },
                  {
                    tagName: 'text',
                    selector: 'portNameLabel',
                  },
                  {
                    tagName: 'text',
                    selector: 'portTypeLabel',
                  },
                  {
                    tagName: 'circle',
                    selector: 'right',
                  },
                  {
                    tagName: 'circle',
                    selector: 'left',
                  },
                ],
                attrs:{
                  portBody: {
                    width: NODE_WIDTH - 2,
                    refX:1,
                    height: LINE_HEIGHT,
                    strokeWidth: 0,
                    stroke: '#7FA6C5',
                    fill: '#fff',
                  },
                  portNameLabel: {
                    ref: 'portBody',
                    refX: 4,
                    refY: 6,
                    fontSize: 6,
                    fill:"#163D5C",
                    textWrap: {
                      width: 70,
                      height: "20",
                      ellipsis: true,
                    }
                  },
                  portTypeLabel: {
                    ref: 'portBody',
                    refX: "100%",
                    refX2:-4,
                    refY: 6,
                    fontSize: 6,
                    fill:"#163D5C",
                    textAnchor:"end",
                    textWrap: {
                      width: 50,
                      height: "20",
                      ellipsis: true,
                    }
                  },
                  right:{
                    ref: 'portBody',
                    magnet: true,
                    refX:'100%',
                    refX2:0,
                    refY:0.5,
                    xAlign:"middle",
                    yAlign:"middle",
                    r:2,
                    // height:LINE_HEIGHT - 2,
                    fill:"#fff",
                    strokeWidth: 1,
                    stroke:"#7FA6C5"
                  },
                  left:{
                    ref: 'portBody',
                    magnet: true,
                    xAlign:"middle",
                    yAlign:"middle",
                    refX:-1,
                    refY:0.5,
                    r:2,
                    
                    // strokeWidth:2,
                    // stroke: '#5F95FF',
                    height:LINE_HEIGHT - 2,
                    fill:"#fff",
                    strokeWidth: 1,
                    stroke:"#7FA6C5"
                  }
                },
                position: 'erPortPosition',
            },
     
            // left: { position: 'left', attrs: PORT_ATTRS },
            // right: { position: 'right', attrs: PORT_ATTRS },
        },
    },
    propHooks(metadata: any) {
      const { collapse,icon,topLabel,title,stroke } = metadata;
      if(title){
        set(metadata,['attrs','label','title'],title)
      }
      if(icon){
        set(metadata,['attrs','icon','class'],icon)
      }
      if(topLabel){
        set(metadata,['attrs','topLabelBg','width'],topLabel.length * 10 > 120 ? 120 : topLabel.length * 10)
        set(metadata,['attrs','topLabel','text'],topLabel)
        set(metadata,['attrs','topLabel','title'],topLabel)
      }
      if(collapse != undefined){
          set(metadata,['attrs','collapse','class'],collapse ? 'i-stash:angle-right transition-transform-500 c-#165DFF' : 'i-stash:angle-right rotate-90 transition-transform-500 c-#8EAFC8')
          set(metadata,['attrs','collapse','title'],collapse ? '展开' : '折叠')
      }
      if(stroke){
        set(metadata,['attrs','body','stroke'],stroke)
        // set(metadata,['attrs','body','stroke'],stroke)
      }
      return metadata;
    }
}

Graph.registerNode('er-node',ER_MARK,true)


export const DefaultEdgeMD = {
  inherit: 'edge',
  zIndex:1,
  // connector: { name: 'smooth' },
  router: {
    name: 'er',
    args: {
      offset: 15,
      direction: 'H',
    },
  },
  attrs: {
      line: {
          stroke: '#165DFF',
      },
  },
}

Graph.registerEdge('er-edge',DefaultEdgeMD,true)